<template>
  <el-container>
    <el-main>
      <!-- <div>
        <el-input v-model="form.path" :autosize="false" :rows="8" class="input" resize="none" type="textarea"> </el-input>
      </div> -->
      <el-main>
        <v-md-editor v-model="currentMessage" style="min-height: 300px"></v-md-editor>
      </el-main>
      <el-form label-width="180px">
        <el-form-item label="拆分规则">
          <el-radio-group v-model="form.trainingPattern">
            <el-radio label="0" size="large">文本拆分</el-radio>
            <el-radio label="1" size="large">AI文件拆分</el-radio>
          </el-radio-group></el-form-item
        >
        <el-form-item label="AI文本拆分提示词" v-show="form.trainingPattern == '1'">
          <el-input v-model="form.qAPromptTemplate" :autosize="false" :rows="5" class="input" resize="none" type="textarea"> </el-input
        ></el-form-item>

        <el-form-item label="处理模式" v-show="form.trainingPattern == '0'">
          <el-radio-group v-model="form.mode">
            <el-radio label="0" size="large">自动</el-radio>
            <el-radio label="1" size="large">自定义</el-radio>
          </el-radio-group></el-form-item
        >

        <el-form-item label="段落最大Token" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.maxTokensPerParagraph" :min="1" size="small" controls-position="right" />
        </el-form-item>
        <el-form-item label="每行最大Tokens" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.maxTokensPerLine" :min="1" size="small" controls-position="right" />
        </el-form-item>
        <el-form-item label="段落之间重叠标记的数目" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.overlappingTokens" :min="1" size="small" controls-position="right" />
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button style="margin-top: 12px; max-width: 100px" @click="submit">提交数据</el-button>
      </div>
    </el-main>
  </el-container>
</template>

	  <script>
import scCron from '@/components/scCron';
import { genFileId } from 'element-plus';

import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';

import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

// VuePress主题以及样式（这里也可以选择github主题）
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prism
import Prism from 'prismjs';
// 代码高亮
import 'prismjs/components/prism-json';
// 选择使用主题
VMdEditor.use(vuepressTheme, {
  Prism,
});

// import VMdEditor from '@kangc/v-md-editor';
// import '@kangc/v-md-editor/lib/style/base-editor.css';
// import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
// import '@kangc/v-md-editor/lib/theme/style/github.css';
// // highlightjs
// import hljs from 'highlight.js';
// VMdEditor.use(githubTheme, {
//   Hljs: hljs,
// });
export default {
  name: 'AIKnowledgenDetailUploadManage',
  components: {
    scCron,
    VMdEditor,
  },
  props: {
    wikiId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      currentMessage: '',
      active: 0,
      isSaveing: false,
      currentId: '',
      form: {
        trainingPattern: '0',
        wikiId: '',
        fileName: '',
        path: '',
        fileId: '',
        mode: '0',
        type: 'data',
        qAPromptTemplate: `我会给你一段文本，学习它们，并整理学习成果，要求为：
        1. 提出最多 20 个问题。
        2. 给出每个问题的答案。
        3. 答案要详细完整，答案可以包含普通文字、链接、代码、表格、公示、媒体链接等 markdown 元素。
        4. 按格式返回多个问题和答案:

        Q1: 问题。
        A1: 答案。
        Q2:
        A2:
        ……

        我的文本："""{{$input}}"""`,
        maxTokensPerParagraph: 1000,
        maxTokensPerLine: 300,
        overlappingTokens: 100,
      },
    };
  },
  async mounted() {
    this.$nextTick(() => {
      this.form.wikiId = this.wikiId;
    });
  },
  methods: {
    back() {
      this.$emit('back');
    },
    setWiki(id) {
      this.$nextTick(() => {
        this.form.wikiId = id;
        this.form.fileName = '';
        this.form.fileId = '';
        this.form.path = '';
        this.active = 0;
        this.form.trainingPattern = '0';
        this.form.mode = '0';
        this.form.type = 'data';
        this.form.qAPromptTemplate = `
		我会给你一段文本，学习它们，并整理学习成果，要求为：
        1. 提出最多 20 个问题。
        2. 给出每个问题的答案。
        3. 答案要详细完整，答案可以包含普通文字、链接、代码、表格、公示、媒体链接等 markdown 元素。
        4. 按格式返回多个问题和答案:

        Q1: 问题。
        A1: 答案。
        Q2:
        A2:
        ……

        我的文本："""{{$input}}"""`;
        this.form.maxTokensPerParagraph = 1000;
        this.form.maxTokensPerLine = 300;
        this.form.overlappingTokens = 100;
      });
    },
    pre() {
      this.active = this.active - 1;
    },
    next() {
      this.active = this.active + 1;
    },
    add() {},
    upsearch() {
      // this.$refs.table.upData(this.search);
    },
    handleChange(file, fileList) {
      this.state.fileList = fileList;
      this.uploadFile();
    },
    handleExceed(files) {
      this.$refs.uploadRef.clearFiles();
      this.state.fileList = [];
      let file = files[0];
      file.uid = genFileId();
      this.$refs.uploadRef.handleStart(file);
      // this.uploadFile();
    },
    // handleRemove() {
    //   //file,fileList
    //   this.state.fileList = [];
    // },
    async uploadFile() {
      if (this.state.fileList.length < 1) return;
      let response = await this.$API.upload.upload3.post(this.state.fileList[0].raw);

      if (response.code != 200) {
        this.$message.error(response.message);
        return;
      }

      this.form.fileName = response.data.name;
      this.form.path = response.data.url;
      this.form.fileId = response.data.fileId;
      this.$message.success('上传成功');
    },
    //表单提交方法
    async submit() {
      // 将content转换成File对象
      const file = new File([this.currentMessage], 'data.txt', { type: 'text/plain' });
      let response = await this.$API.upload.upload3.post(file);

      if (response.code != 200) {
        this.$message.error(response.message);
        return;
      }
      this.form.fileName = response.data.name;
      this.form.path = response.data.url;
      this.form.fileId = response.data.fileId;
      var res = await this.$API.aiWiki.knowledgeCreate.post(this.form);
      this.isSaveing = false;
      if (res.code == 200) {
        this.$emit('success');
        this.$message.success('操作成功');
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
  },
};
</script>
  <style lang="scss" scoped>
// 调整markdown组件的一些样式，deep可以修改组件内的样式，正常情况是scoped只能修改本组件的样式。
:deep(.v-md-editor) {
  min-height: 300px;
  max-height: 600px;
}
</style>
